<template>
  <div>
    <div class="center">
      <el-row type="flex" justify="space-between" align="middle" :gutter="20">
        <el-col :span="6">
          <img src="http://localhost:8008/imgs/Logo.png" width="196" height="65"/>
        </el-col>
        <el-col :span="12">
          <el-input
              class="search-bar"
              placeholder="请输入搜索的关键字"
              suffix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <div style="display:flex; justify-content:center; align-items:center; width:100%;">
            <el-menu mode="horizontal" active-text-color="orange" style="font-size: 30px">
              <el-menu-item index="0" style="font-size: 20px">首页</el-menu-item>
              <el-menu-item index="1" style="font-size: 20px">商城</el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="2">
          <el-popover v-if="user==null"
                      placement="bottom-start"
                      title="兜兜集欢迎你!"
                      width="200"
                      trigger="hover">
            <div slot="reference" class="icon-wrapper" style="position: absolute;padding: 5px 50px  15px  50px" >
              <i class="el-icon-user" style="font-size: 2rem" ></i>
            </div>
            <el-button type="info" @click="toUserReg">注册</el-button>
            <el-button style="background-color: orange" @click="toUserLogin">登录</el-button>
          </el-popover>
          <el-popover v-else
                      placement="bottom-start"
                      width="200"
                      trigger="hover">
            <div slot="reference" class="icon-wrapper" style="position: absolute;padding: 5px 50px  15px  50px">
              <a href="/frontEnd/user/homePage">
                <el-avatar :src="icon"></el-avatar>
              </a>
            </div>
            <div style="text-align: center">

              <a href="/frontEnd/user/homePage">个人中心</a><br>
              <a href="">消息通知</a><br>
              <a href="javascript:void(0)" @click="logout()">退出登录</a><br>
              <a v-if="user.isAdmin==1" href="/admin/index">后台管理页面</a>
            </div>
          </el-popover>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data: function () {
    return {
      user: localStorage.currentUserId ? JSON.parse(localStorage.currentUserId) : null,
      card:[],
      tabPosition: 'left',
      count: 0,
      articleArr: [],
      categoriesArr: [],
      icon: require("@/assets/images/profile.jpg")
    }
  },
  methods: {
    toUserReg() {
      this.$router.push("/frontEnd/userReg")
    },
    toUserLogin() {
      this.$router.push("/frontEnd/userLogin")
    },
    toPostArticle() {
      this.$router.push("/frontEnd/postArticle")
    },
    load() {
      this.count += 4
    },

    open3() {
      const h = this.$createElement;

      this.$notify({
        message: h('i', { style: 'color: teal'}, 'Copyright © 2023 doudou.保留所有权利。   隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图 ' +
            '苏ICP备20230610号   营业执照   无线电发射设备销售备案编号20230610105453'),
        position: 'bottom-left'
      });
    },
    //发请求获取某个分类下的数据
    categorySelect(key){
      console.log(key);
      this.axios.get("http://localhost:9090/v1/blogs/"+ key +"/index").then((response)=>{
        if (response.data.code==200){
          this.card=response.data.data;
        }
      })
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        //发请求退出登录
        this.axios.get("http://localhost:9090/v1/users/logout").then(function () {
          localStorage.clear();//清空登录成功时保存的数据
          location.href="/frontEnd/homePage";
        })
      }
    },
  },

  mounted: function () {
    this.axios.get("http://localhost:9090/v1/blogs/0/index").then( (response)=> {
      if (response.data.code==200){
        this.card=response.data.data;
      }
    })
    this.axios.get("http://localhost:9090/v1/blogs/allCategories").then((response)=>{
      if (response.data.code==200){
        console.log(response.data.data);
        this.categoriesArr=response.data.data;
      }
    })
  }
}
</script>

<style>
.center {
  width: 1200px;
  margin: 0 auto;
}
.custom-button:hover  {
  background-color: white;
  color: black;
}


body{
  overflow-y: hidden;
}
.infinite-list {
  flex-wrap: wrap; /* 让数据项自适应换行 */
  justify-content: flex-start;
  align-items: center;
  height: 800px;
  width: 1450px;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 商品分成4列 */
  gap: 32px; /* 列与列之间空隙为15像素 */
}

.infinite-list-item {


  background-color: #c3c8c8;
  height: 430px;
  width: 100%; /* 设置为百分比 */

}

ul {
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}

/* 针对 Chrome、Safari 和 Opera */
ul::-webkit-scrollbar {
  display: none;
}

.center {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-bar {
  margin-top: 15px;
  height: 40px;
  line-height: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.icon-wrapper {
  position: relative;
  top: 12px;
}

#menu_aside{
  display: flex;
  flex-direction: column;
  line-height: 5px;
}
#menu_aside .el-menu-item:hover {
  background-color: white; /* 鼠标悬停时的背景色为白色 */
  font-weight: bold; /* 字体加粗 */
  color: black; /* 文字颜色变色，这里设置为黑色 */
}

.el-menu-item.is-active{background: #FFFFFF !important;}

</style>